<template>
	<view class="box">
		<view class="header">
			<view class="image">
				<image src="https://img2.baidu.com/it/u=1074923085,1164664328&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
			</view>
			<view class="name">
				<text>大哥哥</text>
			</view>
			<view class="user">
				<text>普通用户</text>
			</view>
		</view>
		<view class="nav">
			<view @click="change1">
				<text class="iconfont icon-shoucang"></text>
				<text>我的收藏</text>
			</view>	   
			<view @click="change2">
				<text class="iconfont icon-shiwuzhaoling"></text>
				<text>我的失物招领</text>
			</view>
			<view @click="change3">
				<text class="iconfont icon-liebiao"></text>
				<text>我的新鲜事</text>
			</view>
	   </view>
	    <view class="con">
		 <!-- 我的收藏 -->
			<view v-show="current==0"  class="v1" v-for="(item, index) in listArr">
				<view class="img">
					<image src="https://img1.baidu.com/it/u=1033706747,2169506273&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
				</view>
				<view class="cen">
					<view class="t1">
						<text>{{item.title}}</text>
					</view>
					<view class="t2">
						<text>报名</text>
					</view>
				</view>
			
			</view>
			<!-- 我的失物招领 -->
		    <view v-show="current==1" class="v2"  v-for="(item, index) in listArr1">
				<view class="v22">
					<view class="left">
						<image src="https://img2.baidu.com/it/u=1074923085,1164664328&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
					</view>
					<view class="right">
						<view class="v2-1">
							<text>{{item.user}}</text>
							<text class="t2">{{item.time}}</text>
						</view>
						<view class="v2-2">
							<text>{{item.goods}}</text>
						</view>
						<view class="v2-3">
							<text>{{item.content}}</text>
						</view>
					</view>
				</view>
		    </view>
	   	    <view v-show="current==2"  class="v3"  v-for="(item, index) in listArr2">
	   	    	<view class="v32">
	   	    		<view class="left">
	   	    			<image src="https://img2.baidu.com/it/u=1074923085,1164664328&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
	   	    		</view>
	   	    		<view class="right">
	   	    			<view class="v3-1">
	   	    				<text>{{item.user}}</text>
	   	    				<text class="t2">{{item.time}}</text>
	   	    			</view>
	   	    			<view class="v3-2">
	   	    				<text>{{item.content}}</text>
	   	    			</view>
	   	    			<view class="v3-3">
	   	    				<image src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
	   	    				<image src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
	   	    				<image src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
	   	    			</view>
	   	    		</view>
	   	    	</view>
	   	    </view>
	    </view>
	</view>
</template>

<script>
	export default {
		 data() {
		        return {
		           current: 0,
				   listArr:[{
						src:"",
						title:"校园动漫节"
					   },
					   {
						src:"",
						title:"校园电音节"
					   },
					   {
						src:"",
						title:"校园艺术节"
					   }],
				   listArr1:[{
						src: "",
						user:"小哥哥",
						time:'14:20',
						goods:'钥匙',
						content:'捡到一把钥匙，快来领',
					   },{
						src: "",
						user:"小姐姐",
						time:'2021-05-06 09:35',
						goods:'钥匙',
						content:'捡到一把钥匙，快来领',
					   },{
						src: "",
						user:"小哥哥",
						time:'14:20',
						goods:'钥匙',
						content:'捡到一把钥匙，快来领',
					   },],
				   listArr2:[{
				   			src:'',
							user:'小哥哥',
							time:'14:20',
							content:' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看',
				   		}]
		        };
		    },
		methods:{
			change1(){
				this.current=0;
			},
			change2(){
				this.current=1;
			},
			change3(){
				this.current=2;
			}
		}
}
</script>

<style lang="less" scoped>
  @import url('../../static/fonts/iconfont.css');
	.header{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 440rpx;
		background: #f9cc66;
		view{
			margin-bottom: 10rpx;
		}
		.image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 120rpx;
				height: 120rpx;
			}
		}
		.name{
			font-size:30rpx;
			font-weight:bolder;
		}
		.user{
			  font-size: 25rpx;
			  border: 1px solid #000;
			  width: 138rpx;
			  height: 50rpx;
			  line-height: 50rpx;
			  text-align: center;
			  border-radius: 12rpx;
		}
	}
	
	.nav{
		width: 700rpx;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;
		view{
			width: 100%;
			height: 30rpx;
			font-size: 25rpx;
			text-align: center
		}
		
	}
	.con{
		background: #f6f6f6;
		.v1{
			background: #fff;
			width: 690rpx;
			height: 420rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			overflow: hidden;
			// border: 1px solid #000;
			border-radius: 20rpx;
			.img image{
				width:690rpx;
				height:300rpx;
			}
			.cen{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				line-height: 120rpx;
				margin: 0 30rpx;
				.t1{
					font-size: 35rpx;
					font-weight:bolder;
				}
				.t2{
					width:170rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 1px solid #f9cc66;
					background: #f9cc66;
					border-radius: 50rpx;
					font-size: 30rpx;
				}
			}
		}
		.v2{
		 .v22{
			width:700rpx;
			height: 250rpx;
			margin: 0 auto;
			display: flex;
			justify-content:flex-start;
			.left{
				margin-top: 20rpx;
				width: 100rpx;
				height: 100rpx;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				justify-content:center;
				width: 100%;
				border-bottom: 1px solid #ebebeb;
			    margin-left: 20rpx;
				.v2-1{
					margin-bottom: 30rpx;
					display: flex;
					justify-content:space-between;
					.t2{
						font-size: 22rpx;
						color: #b4b3b3;
					}
				}
				.v2-3{
					font-size: 27rpx;
					color: #9b9b9b;
					margin-top: 30rpx;
				}
			}
		}
	}
	// v3
		.v3{
			.v32{
				width:700rpx;
				height: 400rpx;
				margin: 0 auto;
				display: flex;
				// justify-content:center;
				//left
				.left{
					margin-top: 20rpx;
					width: 100rpx;
					height: 100rpx;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				//right
				.right{
					display: flex;
					flex-direction: column;
					width: 100%;
					border-bottom: 1px solid #ebebeb;
					margin-left: 20rpx;
					.v3-1{
						margin-top: 30rpx;
						display: flex;
						justify-content:space-between;
						.t2{
							font-size: 22rpx;
							color: #b4b3b3;
						}
					}
					.v3-2{
						
						font-size: 27rpx;
						color: #9b9b9b;
						margin-top: 30rpx;
					}
					.v3-3>image{
						margin-top: 30rpx;
						margin-right: 15rpx;
						width: 180rpx;
						height: 180rpx;
					}
					
				}
			}
		}
}
	
</style>
